<template>
  <div>
<el-dialog :title="isAdd?  '添加商品规格':'编辑商品规格' " :visible.sync="isShow" center      :before-close="cancel">
  <el-form ref="specsinfo" :model='specsInfo' :rules='rules'>
 <el-form-item label="规格名称" :label-width="formLabelWidth"     prop="specsname" >
      <el-input  autocomplete="off" v-model="specsInfo.specsname"></el-input>
    </el-form-item>

     <el-form-item
    v-for="(domain, index) in attrArr"
    :label="'规格属性'"
    :label-width="formLabelWidth"
  >
     <el-input class="vInput" v-model="domain.value" ></el-input>
     <el-button type="primary" style="height:40px" @click="addDomain(true)" v-if="index==0">新增商品属性</el-button>
     <el-button @click.prevent="removeDomain(index)" v-else>删除</el-button>
  </el-form-item>

<el-form-item label="状态" :label-width="formLabelWidth">
 <el-switch
    v-model="specsInfo.status"
    active-color="#13ce66"
    :active-value="1"
   :inactive-value="2"

   >

  </el-switch>

</el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>

import { specsadd, specsinfo, specsedit } from '../../../api/api.js'
import { mapActions } from 'vuex'
export default {
  props: ['isShow', 'isAdd'],
  data () {
    return {
      formLabelWidth: '120px',
      attrArr: [{
        value: ''
      }],

      specsInfo: {
        specsname: '',
        attrs: '',
        status: 1
      },
      rules: {
        specsname: [
          { required: true, message: '请输入商品规格名称', trigger: 'blur' },
          {
            min: 2,
            max: 15,
            message: '长度在 2 到 15 个字符',
            trigger: 'blur'
          }
        ]

      }

    }
  },
  methods: {
    ...mapActions({
      getSpecs: 'sku/getSpecslist',
      getCount: 'sku/getUsercount'
    }),

    addDomain (flage) {
      if (this.attrArr.length >= 6) {
        this.$message.warning('最多添加6项')
        return false
      }

      this.attrArr.push({
        value: ''

      })
    },
    removeDomain (index) {
      if (index !== -1) {
        this.attrArr.splice(index, 1)
      }
    },
    cancel () {
      this.$emit('cancel', false)
      this.reset()
    },
    confirm () {
      this.specsInfo.attrs = this.attrArr.map(item => {
        return item.value
      }).join(',')

      this.$refs.specsinfo.validate((val) => {
        if (val) {
          if (this.isAdd) {
            specsadd(this.specsInfo).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.cancel()
                this.getSpecs()
                this.getCount()
              }
            })
          } else {
            specsedit(this.specsInfo).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.cancel()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('验证失败')
        }
      })
    },
    // 清空
    reset () {
      this.specsInfo = {
        specsname: '', // 商品规格名称
        attrs: '', // 规格属性值
        status: 1 // 状态1正常2禁用
      }
      // 调用清空验证的方法
      this.$refs.specsinfo.resetFields()
      // 清空规格属性数组
      this.attrArr = [
        {
          value: ''
        }
      ]
    },
    lookup (id) {
      // 封装一个 查询一条数据的接口
      specsinfo({ id }).then(res => {
        if (res.code === 200) {
          this.specsInfo = res.list[0]
          this.specsInfo.id = id
          /*
      数据回先  后端返回时 数组数据格式
      需要的格式是[{value:1}]

    */
          this.specsInfo.attrs.forEach((item, index) => {
            if (index === 0) {
              this.attrArr[0].value = item
            } else {
              this.attrArr.push({
                value: item
              })
            }
          })
        }
      })
    }

  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.specifics{
 /deep/   .vInput{
         width: 70%;
    }

}
/deep/  .vInput{
    width: 80%;
}
</style>
